<template>
	<view class="container" :style="appThemeStyle">
		<u-tabs :list="tabs" :is-scroll="false" v-model="curTab" :active-color="appTheme.mainBg" :duration="0.2"
			@change="onChangeTab" />
		<view class="container_item " v-for="(i,index) in list" :key="index" >
			<view class="container_item_top">
				<text style="color: #999;">{{i.create_time}}</text>
				<text class="status">{{i.state_text}}</text>
			</view>
			<view class="goods-image" v-for="(item,index) in i.goods" >
				<image class="goods-img" :src="item.goods_image" mode=""></image>
				<view class="goods-image-intro">
					<view class="goods-image-intro-top">
						<text>{{item.goods_name}}</text>
						<text style="color: #999;">￥{{item.goods_price}}</text>
					</view>
					<view style="margin: 10rpx 0;" class="goods-image-intro-top">
						<text>商品规格：小件</text>
					</view>
					
				</view>
			</view>
			<view class="goods-image-intro-top" style="color: var(--main-bg);">
				<text>共{{i.goods.length}}件商品，总金额￥{{i.total_price}}</text>
			</view>
			<template >
				<view class="container_bottom">
					<view class="address" v-if="i.state_text!=='已完成'">
						<p>{{i.address.name}} {{i.address.phone}}</p>
						<p style="margin-top: 10rpx;" >{{i.address.region.region}}{{i.address.detail}}</p>
					</view>
					<view class="send"  @click="showpop(i.order_id)" v-if="i.state_text=='待配送'" >
						配送
					</view>
					<!-- <view class="send"   v-if="i.state_text=='配送中'" >
						配送中
					</view> -->
					<!-- <view class="send"   v-if="i.state_text=='已完成'" >
						配送完成
					</view> -->
				</view>
			</template>
		</view>
		<u-empty text="暂无订单" v-if="list==''" mode="list"></u-empty>
		<u-modal v-model="show" :show-cancel-button='true' @cancel="cancel" @confirm='confirm' :mask-close-able="true"
			:content="content"></u-modal>
	</view>
</template>

<script>
	import * as OrderApi from '@/api/order'

	// 每页记录数量
	const pageSize = 15

	// tab栏数据
	const tabs = [{
		name: `全部`,
		value: 'all'
	}, {
		name: `待配送`,
		value: 'delivery'
	}, {
		name: `配送中`,
		value: 'received'
	}, {
		name: `已完成`,
		value: 'comment'
	}]

	export default {
		data() {
			return {
				content: '确认配送',
				show: false,
				// tab栏数据
				tabs,
				// 当前标签索引
				curTab: 0,
				// 订单列表数据
				list: [],
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				pageNo: 1,
				orderId:''
			}
		},
		onReachBottom() {
			console.log('触底了');
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad() {
			// 初始化当前选中的标签
			this.init()
			// 注册全局事件订阅: 是否刷新订单列表
			uni.$on('syncRefresh', canReset => {
				this.canReset = canReset
			})
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.canReset && this.onRefreshList()
			this.canReset = false
		},

		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
			// 卸载全局事件订阅
			uni.$off('syncRefresh')
		},

		methods: {

			// 初始化当前选中的标签
			init() {
				const app = this
				app.upCallback()
			},
			confirm() {
				OrderApi.peisong({
					orderId:this.orderId
				}).then(res=>{
					this.list = []
					this.pageNo = 1
					this.upCallback()
				})
			},
			cancel() {
				console.log('点击了取消！');
				this.orderId = ''
			},
			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback() {
				this.getOrderList()
				  .then(list => {
					this.list = list
				  })
				  .catch(() => app.mescroll.endErr())
					
			},

			// 获取订单列表
			getOrderList() { 
				const app = this
				return new Promise((resolve, reject) => {
					OrderApi.list({
							dataType: app.getTabValue(),
							page: app.pageNo,
							tp:'delivery'
						}, {
							load: false
						})
						.then(result => {
							resolve(result.data.list.data)
						})
				})
			},



			// 获取当前标签项的值
			getTabValue() {
				return this.tabs[this.curTab].value
			},

			// 切换标签项
			onChangeTab(index) {
				console.log(index);
				const app = this
				// 设置当前选中的标签
				app.curTab = index
				// 刷新订单列表
				app.pageNo = 1
				app.list = []
				app.upCallback()
			},
			showpop(id) {
				this.show = true
				this.orderId = id
			},
		},

	}
</script>

<style lang="scss" scoped>
	.container_item {
		width: 686rpx;
		margin: 30rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;

		.container_item_top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.status {
				color: var(--main-bg);
			}
		}

		.goods-image {
			margin: 20rpx 0;
			display: flex;
			align-items: center;

			.goods-img {
				width: 124rpx;
				height: 124rpx;
				margin-right: 20rpx;
			}

			.goods-image-intro {

				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.goods-image-intro-top {
					width: calc(606rpx - 124rpx);
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.container_bottom {
			display: flex;
			margin: 40rpx 0;
			justify-content: space-between;
			align-items: center;
			.address {
				
			}

			.send {
				color: var(--main-bg);
				border: 1rpx solid var(--main-bg);
				padding: 10rpx 20rpx;
				border-radius: 15rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>